$(function(){
    // 登录等出
    let list = null
    const nickname = getCookie('nickname')
    console.log(nickname)
    if(nickname){
      $('.off').addClass('hide')
      $('.bind-off').addClass('hide')
      $('.qq-off').addClass('hide')
      $('.on').removeClass('hide').html(`欢迎您，${nickname} &nbsp;&nbsp;<a href='' title="登录">退出</a>`)
      $('.qq-on').removeClass('hide').html(`<img src="../img/list/zb-list.jpg" alt="" class="lf">
      <p>
      ${nickname}
      </p>`)
      $('.bind-on').removeClass('hide')
      $('.on > a').on('click',function(){setCookie('nickname',nickname,-1);console.log('11')})
      setCartNum()
    }else{
      $('.bind-on').addClass('hide')
      $('.bind-off').removeClass('hide')
      $('.on').addClass('hide')
      $('.qq-on').addClass('hide')
      $('.off').removeClass('hide')
      $('.qq-off').removeClass('hide')
    }

    // 购物车
    function setCartNum() {
      // 拿到 localStorage 里面的那个数组
      
      const cart = JSON.parse(window.localStorage.getItem('cart')) || []
      // 3-2. 判断 cart 是一个 [], 那么就用 0 填充到指定位置
      if (!cart.length) {
        $('.car-Num').html('0')
        return
      }
    
      // 3-3. 能来到这里, 表示购物车里面有数据
      // 需要把每一条数据的 cartNum 叠加咋一起
      let count = 0
      cart.forEach(item => count += item.cart_number - 0)
      console.log($('.car-Num'))
      $('.car-Num').html(count)
    }

    
    const list_info = {
        current: 1,
        pagesize: 16
      }
      // 分页器
      getTotalPage()
      async function getTotalPage() {
        // 2-1. 请求分页数据
        const totalInfo = await $.get('../server/getTotalPage.php', list_info, null, 'json')
    
        // 2-2. 渲染分页内容
        // jquery-pagination 插件
        $('.pagination').pagination({
          pageCount: totalInfo.total,
          mode: 'fixed',
          showData:5,
          prevContent:'上一页',
          nextContent:'下一页',
          coping:true,
          homePage: '首页',
          endPage: '末页',
          jump:true,
          jumpIptCls:'页码',
          jumpBtn:'Go',
          callback (index) {
            list_info.current = index.getCurrent()
            // 从新请求商品列表
            getGoodsList()
          }
        })
      }

      // 大商品列表
      getGoodsList()
      async function getGoodsList() {
        // 商品
        const goodsList = await $.get('../server/getGoodsList.php', list_info, null, 'json')
        // 给全局变量 list 进行赋值
        list = goodsList.list
        // console.log(list)
        // 渲染页面
        let str = ''
        goodsList.list.forEach(item => {
          str += `
            <dl>
            <dt data-id="${ item.Id }">
                <a href="#" class="detail">
                    <img src="${ item.img }" alt="请稍候">
                </a>
            </dt>
            <dd>
                <a href="#" class="imgName detail">${ item.name }</a>
                <p>QB价格：<span>${ item.qb_pric }QB</span></p>
                <p>微信价格：<span>${ item.rmb_num }</span></p>
                <p class="wechat" data-id="${ item.Id }"><a>加入购物车</a></p>
            </dd>
        </dl>
          `
        })
        $('.plate-box').html(str)
      }
      // 小商品列表
      getSGoodsList()
      async function getSGoodsList() {
        // 商品
        const goodsList = await $.get('../server/smallgetGoodsList.php', list_info, null, 'json')
        // 给全局变量 list 进行赋值
        // list = goodsList.list
        // 渲染页面
        let str = `<h3>热门排行
        <span></span>
        </h3><ul>`
        goodsList.list.forEach(item => {
          str += `
          <li class="">
          <a href="">
              <div class="icorank">${ item.Id }</div>
              <img src="${ item.img }" alt="不见了">
              <div class="djinfo">
                  <p class="djname">${ item.name }</p>
                  <p class="djprice">${ item.qb_pric }</p>
                  <p class="djcpri">微信价格：<b>${ item.rmb_num }</b></p>
              </div>
          </a>
          </li>
          `
        })
        str += `</ul>`
        $('.hot10').html(str)
      }
      // 跳转详情页
      $('.plate-box').on('click', '.detail', function () {
        // 9-2. 拿到 标签身上记录的商品 id
        const id = $(this).data('id')
        // 9-3. 把这个 id 存储到 cookie 中
        setCookie('goods_id', id)
        // 9-4. 进行页面跳转
        window.location.href = '../pages/detail.html'
      })

      // 加入购物车
      $('.plate-box').on('click', '.wechat', function () {
        // 4-2. 拿到 localStorage 里面有没有数组
        const cart = JSON.parse(window.localStorage.getItem('cart')) || []
    
        // 多一个拿到 id 的操作
        const id = $(this).data('id')
        // console.log(id)
        // console.log('11')
        // 4-3. 判断一下 cart 数组里面有没有这个数据
        const flag = cart.some(item => item.Id == id)
        console.log(flag)
        if (flag) {
          // 4-4. 如果有这个数据拿到这个信息
          const cart_goods = cart.filter(item => item.Id == id)[0]
          cart_goods.cart_number = cart_goods.cart_number - 0 + 1
        } else {
          // 拿到当前商品 id 所属的信息
          const info = list.filter(item => item.Id == id)[0]
          info.cart_number = 1
          cart.push(info)
          setCartNum(info)
        }
    
        // 4-5. 添加完毕还要存储到 localStorage 里面
        window.localStorage.setItem('cart', JSON.stringify(cart))
        // console.log(window.localStorage)
        setCartNum()
      })

      // 跳转详情页
      $('.plate-box').on('click', 'dt', function () {
        // 9-2. 拿到 标签身上记录的商品 id
        const id = $(this).data('id')
        console.log(id)
        // 9-3. 把这个 id 存储到 cookie 中
        setCookie('goods_id', id)
        // 9-4. 进行页面跳转
        window.location.href = '../pages/detail.html'
      })

})
